<!-- Search -->
<template>
  <div>
    <!-- 头部导航 -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
    >
      <template #left >
            <div class="area" @click="$router.push({path: '/area'})" :label="title">
              {{title}}
              <van-icon name="arrow-down" color="#666"/>
              |
            </div>
          </template>
    </van-search>
      <van-icon name="map-marked" class="AreaIcon"/>

  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      title: localStorage.getItem('cityName') || '北京'
    }
  }

}

</script>
<style lang='less' scoped>
.van-search {
  padding: 0;
    width: 8rem;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    position: fixed;
    z-index: 100;

}
.van-search .area {
  color: #666;
  background-color: #fff;
  font-size: 14px;
  font-weight: normal;
  padding-left: 5px;
}
/deep/ .van-icon-arrow-down:before {
  color: #666;
}
.van-search__content {
  background-color: #fff;

}
/deep/ .AreaIcon {

      position: absolute;
    z-index: 99;
    left: 330px;
    top: 23px;
    color: white;
}
</style>
